<!-- 这里是员工主页 -->

<template>
    <div>
        <template v-if="currentUserType === 'manager'">
            <h2>经理主页（{{ currentUserName }}）</h2>
        </template>
        <template v-else-if="currentUserType === 'department_manager'">
            <h2>部门经理主页（{{ currentUserName }}）</h2>
        </template>
        <template v-else>
            <h2>员工主页（{{ currentUserName }}）</h2>
        </template>

        <div>
            <div class="item">
                <h2>班次</h2>
                <template v-if="todayWorkshift === ''">
                    <h3>您今日无班次，无需打卡</h3>
                </template>
                <template v-else>
                    <h3>您今日的班次是<span style="color: red;">{{ todayWorkshift }}</span></h3>
                    <p>请进行今日的打卡操作</p>
                </template>
            </div>

            <div class="item">
                <!-- 加班状态 -->
                <h2>加班提醒</h2>
                <template v-if="todayOvertimes.length === 0">
                    <p>最近无加班活动</p>
                </template>
                <template v-else>
                    <template v-for="(item,index) in todayOvertimes">
                        <p :key="index">{{ index+1 }} . {{ item }}</p>
                    </template>
                </template>
            </div>

            <div class="item">
                <h2>请假提醒</h2>
                <template v-if="todayLeaves.length === 0">
                    <p>最近无请假活动</p>
                </template>
                <template v-else>
                    <template v-for="(item,index) in todayLeaves">
                        <p :key="index">{{ index+1 }} . {{ item }}</p>
                    </template>
                </template>
            </div>

            <div class="item">
                <!-- 请假状态 -->
                <h2>当前时间</h2>
                <h4>日期：{{ currentDate }}</h4>
                <h4>时间：{{ currentTime }}</h4>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    import moment from "moment";

    export default {
        name: "employeeIndex",
        data: function() {
            return {
                todayWorkshift: "",
                todayOvertimes: [],
                todayLeaves: [],
                currentDate: "",
                currentTime: "",
            }
        },
        computed: {
            currentUserType: function() {
                return this.$store.state.userType;
            },
            currentUserName: function() {
                return this.$store.state.userName;
            }
        },
        methods: {

            /**
             * @description 获取今日是否有班次
             */
            getTodayWorkshift: function() {
                var _this = this;
                axios.get("http://127.0.0.1:8000/api/workshift/reminder/")
                    .then(function(response) {
                        _this.todayWorkshift = response.data.data.workshift;
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             * @获取加班的请求提醒
             */
            getOvertimeReminders: function() {
                var _this = this;
                const h = this.$createElement;

                axios.get("http://127.0.0.1:8000/api/overtime/reminder/", {
                        params: {
                            action: "show"
                        }
                    })
                    .then(function(response) {
                        console.log("getOvertimeRemindersgetOvertimeRemindersgetOvertimeReminders");
                        console.log(response);
                        response.data.data.forEach(function(item, index) {
                            _this.todayOvertimes.length = 0;
                            _this.todayOvertimes.push(item.message);
                        })
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             * @获取请假的请求提醒
             */
            getLeaveReminder: function() {
                var _this = this;
                const h = this.$createElement;

                axios.get("http://127.0.0.1:8000/api/leave/reminder/", {
                        params: {
                            action: "show"
                        }
                    })
                    .then(function(response) {
                        response.data.data.forEach(function(item, index) {
                            _this.todayLeaves.length = 0;
                            _this.todayLeaves.push(item.message);
                        })
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             * @description 更好地设置显示时间
             */
            getcurrentTime: function() {
                let now = new moment();
                this.currentDate = now.format("YYYY-MM-DD");
                this.currentTime = now.format("HH:mm:ss");
                setTimeout(this.getcurrentTime, 1000);
            }
        },
        mounted: function() {
            this.getTodayWorkshift();
            this.getOvertimeReminders();
            this.getLeaveReminder();
            this.getcurrentTime();
        }
    }
</script>

<style scoped>
    .item {
        float: left;
        width: 40%;
        height: 180px;
        margin: 5% 5% 5% 5%;
        border-radius: 8px;
        /*border-width: 1px;
        border-style: solid; */
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
</style>
